<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>华为商城-小懒猫</title>
		<meta name="keywords" content="关键字,关键字"/>
		<meta name="description" content="描述信息">
		<link rel="stylesheet" href="css/common.css" />
		<style type="text/css">
			body{
				background: #F5F5F5;
			}
			.header{
				height: 60px;
				line-height: 60px;
				font-size: 10px;
			}
			.h_main{
				width: 1220px;
				height: 100%;
			}
			.nav_title{
				display: flex;
			}
			.nav_title > li > span{
				padding : 0px 12px;
			}
			.nav_title > li > a{
				font-size: 12px;
				color: #333;
			}
			.nav_title > li > a:nth-child(1){
				color: #CF0A2C;
			}
			.container{
				height: 800px;
			}
			.c_wrap{
				width: 1220px;
				background: #fff;
			}
			dl{
				display: flex;
			}
			dt{
				margin-right: 30px;
				margin-left: 30px;
				height: 40px;
				line-height: 40px;
				color: #666666;
			}
			dd{
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
			dd > a{
				color: #000;
			}
			.activeColor{
				color: #CF0A2C;
			}
		</style>
	</head>
	<body>
			<div class="header">
				<div class="h_main marginAuto">
					<ul class="nav_title">
						<li>
							<a class="activeColor" href="javascript:void(0)" >首页</a>
						</li>
						<li>
							<span>&gt;</span>
							<a href="javascript:void(0)">笔记本</a>
						</li>
						<li>
							<span>&gt;</span>
							<a href="javascript:void(0)">电脑</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="container">
				<div class="c_wrap marginAuto">
					<dl>
						<dt>分类:</dt>
						<dd>
							<a href="javascript:void(0);">笔记本</a>
						</dd>
						<dd>
							<a href="javascript:void(0);">台式机</a>
						</dd>
						<dd>
							<a href="javascript:void(0);">智慧屏</a>
						</dd>
					</dl>

					<dl>
						<dt>优惠服务:</dt>
						<dd>
							<a href="javascript:void(0);">仅看有货</a>
						</dd>
						<dd>
							<a href="javascript:void(0);">分期免息</a>
						</dd>
						<dd>
							<a href="javascript:void(0);">优惠商品</a>
						</dd>
					</dl>

					<dl>
						<dt>排序:</dt>
						<dd>
							<a class="activeColor" href="javascript:void(0);">综合</a>
						</dd>
						<dd>
							<a href="javascript:void(0);">最新</a>
						</dd>
						<dd>
							<a href="javascript:void(0);">评论数</a>
						</dd>
						<dd>
							<a href="javascript:void(0);">价格</a>
						</dd>
					</dl>
				</div>
			</div>
		<script type="text/javascript">
			function dom(id){
				return document.getElementById(id);
			}
			function log(msg){
				return console.log(msg);
			}
			window.onload = function(){

			}
		</script>
	</body>
</html>
